<template>
  <div class="register">
    <div class="input_div">
      <input type="text" 
      placeholder="用户名" 
      ref="account"
      class="account"
      @blur="checkEmpty($event,'用户名')"
      v-model="formRegister.username">
      <div class="Password">
        <img id="demo_img" src="@/assets/img/l_r/密码不可见.svg" @click="hideShowPsw">
        <input 
          type="password" 
          ref="password"
          placeholder="密码" 
          class="password" 
          @blur="checkEmpty($event,'密码')"
          id="demo_input"
          v-model="formRegister.password"> 
      </div>

    <div class="Repassword">
      <img id="demo_img1" src="@/assets/img/l_r/密码不可见.svg" @click="hideShowPsw1">
      <input 
        type="password" 
        placeholder="确认密码" 
        ref="password"
        @blur="checkEmpty($event,'确认密码')"
        class="repeat_password" 
        id="demo_input1"
        v-model="formRegister.ackPassword"> 
    </div>
      <!-- <input 
        type="text" 
        placeholder="手机号码" 
        class="phone_number"
        v-model="formRegister.phoneNumber"> -->
      <!-- <div class="check_number">
        <input type="text" placeholder="请输入验证码"> 
        <button>获取验证码</button>
      </div> -->
    </div>
    <button class="register_button" @click="register(formRegister.username,formRegister.password)"><strong>注&nbsp;册</strong></button>
    <!-- <div class="other-register">
      <div class="tip">
        <span class="left"></span>
        <span>一键注册</span>
        <span class="right"></span>
      </div>
      <div class="other">
        <div class="QQ"></div>
        <div class="wechat"></div>
        <div class="weibo"></div>
      </div>
    </div> -->
    
  </div>
</template>

<script>
import { getRegister } from '@/network/l_r';

export default {
  name:'register',
    data() {
    return {
      demoImg:{},
      demoInput:{},
      demoImg1:{},
      demoInput1:{},
      // 用户注册信息
      formRegister: {
        username: '',
        password: '',
        // phoneNumber: '',
        ackPassword: ''
      },
      }
    },
    methods: {
    //隐藏text block，显示password block
    hideShowPsw(){
        // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
        this.demoImg = document.getElementById("demo_img"),
        this.demoInput = document.getElementById("demo_input")
        if (this.demoInput.type == "password") {
            this.demoInput.type = "text";
            this.demoImg.src = require('@/assets/img/l_r/密码可见.svg');
        }else {
            this.demoInput.type = "password";
            this.demoImg.src = require('@/assets/img/l_r/密码不可见.svg');
        }
    },
    //隐藏text block，显示password block
    hideShowPsw1(){
    // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
    this.demoImg1 = document.getElementById("demo_img1"),
    this.demoInput1 = document.getElementById("demo_input1")
    if (this.demoInput1.type == "password") {
        this.demoInput1.type = "text";
        this.demoImg1.src = require('@/assets/img/l_r/密码可见.svg');
    }else {
        this.demoInput1.type = "password";
        this.demoImg1.src = require('@/assets/img/l_r/密码不可见.svg');
      }
   },
  //  确认密码
  //  ack(){
  //   // alert(1)
  //   // console.log(this.formRegister.password);
  //   // console.log(this.formRegister.ackPassword);
  //   if(this.formRegister.password !== this.formRegister.ackPassword){
  //    alert('两次密码输入不一致，请检查后重新输入') 
  //   } 
  //  },
  //  发送注册请求
    async register(username,password){
      // console.log(username,password);
      getRegister(username,password).then(
        res =>  {
          if(res.data.code == 501){
            alert('用户名已存在，请重新取名')
            this.$refs.account.value = ''
            return;
          }
          if(this.formRegister.password !== this.formRegister.ackPassword)
          {
            alert('两次密码输入不一致，请检查后重新输入') 
            return;
          }
          alert('注册成功')
          this.$router.replace('/l_r/login')
        }
      )
    },
    // 判断输入框内容是否为空
    checkEmpty(e,msg){
      // console.log(e.target,msg);
      if(e.target.value == '')
        alert(`${msg}不能为空`)
      // return
    }
    // register(username,password){
    //   let params = {userName:username,password}
    //   axios.post('http://47.103.199.147:8888/user/register',params).then(
    //     res => {
    //       console.log('请求成功');
    //       console.log(res);
    //     })
    //   }
    }
  }

</script>

<style scoped>
/* 注册样式 */
  .register{
    position: absolute;
    left: 33.75px;
    right: 33.75px;
    height: calc(60vh - 53px);

    display: flex;
    flex-direction: column;
    justify-content:space-around 
  }

  /* @media screen and (min-width: 800px){
      .register{
      position: absolute;
      left: 9vw;
      right:9vw;
      height: 80vw;

      display: flex;
      flex-direction: column;
      justify-content:space-around
    }
  } */

/* 输入框容器样式 */
  .input_div{
    position: relative;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content:space-around
  }

/* 账号输入框样式 */
  .account {
    height: 40px;
    border-radius: 20px;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
  }

/*密码框显示隐藏显示密码图片*/
  .Password {
    position: relative;
  }
  #demo_img{
  width: 40px;
  height: 25px;
  position: absolute;  
  top: 50%;
  right: 0px; 
  transform: translate(0,-50%);
  margin-right: 10px; 
  display: block;
  z-index: 999;
  }
  /* 输入框样式 */
  .password {
    height: 40px;
    border-radius: 20px;
    width: 100%;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
  }
/*确认密码框显示隐藏显示密码图片*/
  .Repassword {
    position: relative;
    width: 100%;
    padding: 0px;
  }
  #demo_img1{
  width: 40px;
  height: 25px;
  position: absolute;  
  top: 50%;
  right: 0px; 
  transform: translate(0,-50%);
  margin-right: 10px; 
  display: block;
  z-index: 999;
  }
  /* 输入框样式 */
  .repeat_password {
    height: 40px;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
  }
  /* 电话号码输入框 */
  .phone_number {
    height: 35px;
    border-radius: 20px;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
  }
/* 单独设置验证码输入框样式
  .register .input_div .check_number input{
    width: 150px ;
    border-radius: 0;
  } */

  /* 设置获取验证码按钮样式 */
  /* .register .input_div .check_number button{
    background-color: #fff;
    float: right;
    height: 40px;
    width: 75px;
    border-radius: 0;
    margin: 0 auto;
    border: none;
    color: rgb(199, 192, 192);
    font-size: 15px;
  } */

/* 设置忘记密码内边距 */
  .input_div .forget{
    padding: 0 10px;
  }

  /* 忘记密码样式 */
  .input_div .forget a{
    float: right;
    color: var(--color-tint);
    font-size: 14px;
    right: 0;
  }

/* 设置输入账号框图标 */
   .register .account{
    background:url(assets/img/l_r/账号.svg) no-repeat 8px;
    background-size: 25px;
    text-indent: 20px;
  }

/* 设置输入密码框图标 */
  .register .password{
    background:url(assets/img/l_r/密码.svg) no-repeat 10px;
    background-size: 20px;
    text-indent: 20px;
  }

  /* 设置确认密码图标 */
  .register .repeat_password{
    background:url(assets/img/l_r/确认密码.svg) no-repeat 10px;
    background-size: 25px;
    text-indent: 20px;
  }

    /* 设置手机号码图标 */
  .register .phone_number{
    background:url(assets/img/l_r/手机.svg) no-repeat 10px;
    background-size: 25px;
    text-indent: 20px;
  }

  /* 设置验证码图标 */
  .register .check_number input{
    background:url(assets/img/l_r/验证码.svg) no-repeat 10px;
    background-size: 20px;
    text-indent: 20px;
  }

/* 登录按钮样式 */
  .register .register_button{
    background: url(assets/img/l_r/渐变色.jpg) no-repeat;
    background-size: 100% 100%;
    height: 44px;
    width: 187.5px;
    border-radius: 20px;
    margin: 0 auto;
    border: none;
    color: white;
    font-size: 18px;
  }

  .register .tip{
    width: 240px;  
    display: flex;
    justify-content:space-between;
    

    /* text-align: center; */
    font-size: 11px;
    color: #666;
    margin-bottom: 15px;
  }

/* 设置提示文字左渐变样式 */
  .register .tip .left{
    width: 75px;
    height: 2px;    
    background-image: linear-gradient(to right, white , #666666);
    margin-top: 6px;
    /* margin-left: 2vw; */
  }

/* 设置提示文字右渐变样式 */
  .register .tip .right{
    width: 75px;
    height: 2px;    
    background-image: linear-gradient(to left,white , #666666);
    margin-top: 6px;
    /* margin-right: 2vw; */
  }

/* 设置其它登录方式为弹性盒子 */
  .register .other{
    display: flex;
    justify-content: space-around;
    width: 240px;
    margin: 0 auto;
  }

  


  .other .QQ{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/QQ.svg) no-repeat;
    background-size: 33.75px;
  }

  .other .wechat{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/微信.svg) no-repeat;
    background-size: 33.75px;
  }

  .other .weibo{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/微博.svg) no-repeat;
    background-size: 33.75px;
  }




</style>